import React, { memo } from "react";
import { shallowEqual, useSelector ,useDispatch } from "react-redux";

import "./index.scss";
import songActions from 'store/action/songlist'

export default memo(function WYSongsCategory(props) {
  // redux
  const { songCat } = useSelector(
    (state) => ({ songCat: state.getIn(["songlist", "songCat"]) }),
    shallowEqual
  );
   const dispatch = useDispatch()

  // 其它逻辑 
    const getSongType =(name)=>{
      dispatch(songActions.songChangeBy({cat:name,limit:35,offset:1}))
    }

  return (
    <div className="wy-songs-cat">
      <div className="arrow sprite_icon"></div>
      <div className="all">
        <span className="link">全部风格</span>
      </div>
      <div className="category">
        {Reflect.ownKeys(songCat).map((key, index) => (
          <dl className={'item'+index} key={key}>
            <dt>
              <i className="icon sprite_icon2"></i>
              <span>{key}</span>
            </dt>
            <dd>
              {songCat[key].map((i,idx)=>(
                <div className="item" key={idx} onClick={e=>getSongType(i.name)}>
                <span className="link">{i.name}</span>
                <span className="divider">|</span>
              </div>
              ))}
            </dd>
          </dl>
        ))}
      </div>
    </div>
  );
});
